<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入vur的js-->
    <script type="application/javascript" src="js/vue.js"></script>
    <!--    引入elementui的js前必须引入vue的js-->
    <script type="application/javascript" src="js/index.js"></script>
    <!--    引入elementui的css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <!--    引入axios-->
    <script type="application/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <!--搜索表单
        :model==表示绑定表单对象
    -->
    <el-form :inline="true" :model="stuSearchForm" class="demo-form-inline">
        <el-form-item label="学生姓名">
            <el-input v-model="stuSearchForm.sname" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="最早入学">
            <el-date-picker type="date" placeholder="最早入学" v-model="stuSearchForm.earlyDate" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="最晚入学">
            <el-date-picker type="date" placeholder="最晚入学" v-model="stuSearchForm.lastDate" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="searchStudent">搜索</el-button>
        </el-form-item>
    </el-form>

    <!--:data 引入vue中的变量tableData 必须为数组类型-->
    <!--el-table-column:表格的列  prop:必须和tableData中的属性名对于 -->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="smpno"
                label="学生编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="学生姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sdate"
                label="入学日期">
        </el-table-column>
        <el-table-column
                prop="sno"
                label="班级编号">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作">
            <template slot-scope="scope">
            <el-button type="success" size="small" icon="el-icon-edit" @click="updateStu(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页组件的开始
        @size-change:
        @current-change:
        page-sizes:[]
        :current-page=当前页码
        :page-size默认每页显示的条数
        :total 总条数-->

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

<!--修改提示框-->
    <el-dialog
            title="修改学生信息"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="updateStuForm" label-width="80px" >
            <el-form-item label="学生编号">
                <el-input v-model="updateStuForm.smpno"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名">
                <el-input v-model="updateStuForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="入学日期">
                <el-input v-model="updateStuForm.sdate"></el-input>
            </el-form-item>
            <el-form-item label="班级编号">
                <el-input v-model="updateStuForm.sno"></el-input>
            </el-form-item>
            <!--<el-form-item label="班级编号">
                <el-select v-model="value" placeholder="请选择">
                    <el-option>
                    </el-option>
                </el-select>
            </el-form-item>-->
            <el-form-item size="large">
                <el-button type="primary" @click="updateStu">确认修改</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

</div>

</body>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            dialogVisible:false,//编辑框的显示与隐藏
            updateStuForm:{},//编辑表单对象
            tableData:[],
            stuSearchForm:{},//搜索表单对象
            // studentVo:{},
            currentPage:1,
            pageSize:5,
            total: 0
            },
        //页面加载完毕后执行的方法
        created(){
            this.searchStudent()
        },
        methods: {
            searchStudent(){
                axios.post("http://localhost:8080/student/list/"+this.currentPage+"/"+this.pageSize,this.stuSearchForm).then(result=>{
                    // console.log(result)
                    this.tableData=result.data.data.records;
                    this.total=result.data.data.total;
                })
            },
            handleSizeChange(val) {//改变每页的条数时触发该方法
                this.pageSize=val;
                this.searchStudent();
            },
            handleCurrentChange(val) {//改变页数时触发该方法
                this.currentPage=val;
                this.searchStudent();
            },
            del(row){
                let smpno=row.smpno;
                axios.delete("http://localhost:8080/student/delete/"+smpno).then(result=>{
                    if(result.data.code===200){
                        this.$message.success("删除成功"); //弹出成功的消息框
                        this.searchStudent(); //重新加载
                    }
                    if(result.data.code===500){
                        this.$message.error("删除失败")
                    }
                })
            },
            //编辑员工
            updateStu(row){
                this.dialogVisible=true;
                this.updateStuForm=row;
                // console.log(row)
                //let smpno=row.smpno;
                //axios.put("http://localhost:8080/student/updateS"+smpno).then(result=>{
                    //this.updateStuForm=result.date.date.records;
                    //this.searchStudent(); //重新加载
                //})
            }
        }
    })
</script>
</html>